<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { userLoginService } from '@/api/user'
import { adminLoginService } from '@/api/admin'
import router from '@/router'
import { useUserStore } from '@/stores/user'

const changeArea = ref()
const formArea = ref()
const isStudent = ref(true)
const form = ref()

const changeIdentify = () => {
  changeArea.value.classList.toggle('chaneArea-active')
  formArea.value.classList.toggle('formArea-active')
  isStudent.value = !isStudent.value
  loginForm.value.account = ''
  loginForm.value.password = ''
}

watch(isStudent, () => {
  loginForm.value.identify = isStudent.value ? 'student' : 'teacher'
})

const loginForm = ref({
  account: '',
  password: '',
  identify: isStudent.value ? 'student' : 'teacher'
})

const formRule = {
  account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const forgetPassword = () => {
  ElMessage.info('请联系管理员恢复默认密码')
}

const login = async () => {
  const validate = await form.value.validate()
  const useStore = useUserStore()
  let res
  if (!validate) return
  if (loginForm.value.identify === 'student') {
    res = await userLoginService(loginForm.value)
    setTimeout(() => router.push('/student'), 500)
  } else {
    res = await adminLoginService(loginForm.value)
    setTimeout(() => router.push('/teacher'), 500)
  }
  console.log(res.data.data)
  useStore.token = res.data.data.token
  useStore.setIdentify(res.data.data.identify)
  useStore.userId = res.data.data.id
  await ElMessage.success('登录成功')
}

const stuRegister = () => {
  router.push('/student/register')
}

const teaRegister = () => {
  router.push('/teacher/register')
}
</script>

<template>
  <div id="main-login">
    <div class="login-area">
      <div ref="changeArea" class="change-area">
        <h2 class="title">欢迎桥桥在线学习平台平台</h2>
        <el-button type="success" v-if="isStudent" @click="changeIdentify" class="change-btn"
          >教师登录
        </el-button>
        <el-button type="success" v-else @click="changeIdentify" class="change-btn"
          >学生登录
        </el-button>
      </div>
      <div ref="formArea" class="form-area">
        <h1 v-if="isStudent">学生登录</h1>
        <h1 v-else>教师登录</h1>
        <el-form :model="loginForm" :rules="formRule" ref="form">
          <el-form-item prop="account">
            <el-input v-model="loginForm.account" class="input" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              class="input"
              placeholder="密码"
              type="password"
              show-password
              @keyup.enter="login"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button class="login-btn" type="primary" @click="login">登录</el-button>
        <div style="width: 100%; display: flex; justify-content: space-evenly">
          <el-link @click="forgetPassword" type="info">忘记密码</el-link>
          <el-link v-if="isStudent" @click="stuRegister">学生注册</el-link>
          <el-link @click="teaRegister" v-else>教师注册</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#main-login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/image/avatar/background.jpg');
  background-size: cover;
}

.login-area {
  padding: 10px;
  width: 800px;
  height: 400px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: whitesmoke;
}

.change-area {
  width: 45%;
  height: 110%;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
  transition: all 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  z-index: 999;
  border-radius: 10px;
  background: whitesmoke;
}

.chaneArea-active {
  transform: translateX(107%);
}

.form-area {
  width: 45%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  transition: all 0.5s;
}

.formArea-active {
  transform: translateX(-107%);
}

.change-btn {
  height: 50px;
  width: 200px;
  border-radius: 50px;
}

.input {
  height: 50px;
  width: 250px;
}

.login-btn {
  height: 50px;
  width: 250px;
}

.title {
  background: linear-gradient(to right, red, #ff00ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
</style>
